<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts组合图表</title>
    <script src="../../../js/echarts.min.js"></script>
</head>
<body>
<div id="main_bar" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main_bar'));
    var option = {
        title: {
            text: '买了否冷成绩表',
            subtext: ''  // 添加副标题[1,3](@ref)
        },
        tooltip: {
            trigger: 'axis',  // 提示框触发方式改为坐标轴触发[2](@ref)
            axisPointer: {
                type: 'shadow'  // 阴影指示器样式[6](@ref)
            }
        },
        legend: {
            data:['折线成绩', '柱状成绩'],  // 扩展图例项[3](@ref)
            top: 30  // 调整图例位置[5](@ref)
        },
        xAxis: {
            data: ["左宇昊","宋家驹","李朝恒","张安亮","王相锋"],
            axisLabel: {
                rotate: 45  // x轴标签旋转防重叠[4](@ref)
            }
        },
        yAxis: {
            name: '分数',
            min: 0,
            max: 100
        },
        series: [
            {
                name: '折线成绩',
                type: 'line',
                data: [49, 51, 46, 73, 53],
                smooth: true,  // 折线平滑处理[3](@ref)
                itemStyle: {
                    color: '#FF9800'  // 设置折线颜色[5](@ref)
                }
            },
            {
                name: '柱状成绩',
                type: 'bar',  // 新增柱状图系列[1](@ref)
                data: [49, 51, 46, 73, 53],
                barWidth: '40%',  // 设置柱条宽度[3](@ref)
                itemStyle: {
                    color: '#2196F3',  // 自定义柱状图颜色[5](@ref)
                    borderRadius: [5, 5, 0, 0]  // 顶部圆角效果[5](@ref)
                },
                label: {
                    show: true,
                    position: 'top'  // 数值标签显示[2](@ref)
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>